<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ADO</title>
    <link rel="stylesheet" href="../css/styleMenu.css" />
    <link rel="stylesheet" href="../css/stylejQueryMobile.css" />
    <link rel="stylesheet" href="../jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="../jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
    <script src="../js/jsUtilMobile.js" type="text/javascript"></script>
    <script src="../js/jsCoreSite.js" type="text/javascript"></script>
    <script src="../js/jsBackendSemaforoAutobuses.js" type="text/javascript"></script>

</head>
<body>
    <div id="pageDefault" data-role="page" data-theme="b">
        <div data-role="panel" id="navpanel" data-theme="b" data-display="reveal" data-position="right">
            <ul data-role="listview" data-theme="c" data-icon="false" data-divider-theme="c">
                <li data-role="list-divider"><a href="../index.html" data-ajax="false">
                    <h1>
                        Semáforos</h1>
                </a></li>
                <li><a href="#" class="ui-btn-active">
                    <h1>
                        Autobuses</h1>
                    <p>
                        Rendimiento de Combustible Autobuses</p>
                </a></li>
                <li><a href="./frmSemaforoConductores.html" data-ajax="false">
                    <h1>
                        Conductores</h1>
                    <p>
                        Rendimiento de Combustible Conductores</p>
                </a></li>
            </ul>
        </div>
        <div data-role="header" data-theme="b">
            <h1>
                ADO</h1>
            <a id="bars-button" data-icon="bars" class="ui-btn-right" style="margin-top: 5px;"
                href="#navpanel">Menu</a>
        </div>
        <div data-role="content" data-theme="c">
            <form id="formContent" method="post" action="#">
            <h2 class="alignCenter">
                Rendimiento de Combustible Autobuses</h2>
            <fieldset data-role="fieldcontain">
                <legend></legend>
                <div data-role="fieldcontain">
                    <label for="mes">
                        Mes:</label>
                    <select name="mes" id="mes" data-mini="true">
                        <option value="1">Enero</option>
                        <option value="2">Febrero</option>
                        <option value="3">Marzo</option>
                        <option value="4">Abril</option>
                        <option value="5">Mayo</option>
                        <option value="6">Junio</option>
                        <option value="7">Julio</option>
                        <option value="8">Agosto</option>
                        <option value="9">Septiembre</option>
                        <option value="10">Octubre</option>
                        <option value="11">Noviembre</option>
                        <option value="12">Diciembre</option>
                    </select>
                </div>
                <div data-role="fieldcontain">
                    <label for="anio">
                        Año:</label>
                    <select name="anio" id="anio" data-mini="true">
                        <option value="2009">2009</option>
                        <option value="2010">2010</option>
                        <option value="2011">2011</option>
                        <option value="2012">2012</option>
                        <option value="2013">2013</option>
                        <option value="2014">2014</option>
                    </select>
                </div>
                <div data-role="fieldcontain">
                    <label for="ordenar">
                        Ordernar por:</label>
                    <select name="ordenar" id="ordenar" data-mini="true">
                        <option value="factorRendimiento">Factor de Rendimiento</option>
                        <option value="conductor">Conductor</option>
                    </select>
                </div>
                <div data-role="fieldcontain" class="alignCenter">
                    <a href="#" data-role="button" data-mini="true" id="enviarDatos">Actualizar</a>
                </div>
            </fieldset>
            </form>
        </div>
        <div data-role="footer" data-theme="b" data-position="fixed">
            <h4>
                &copy;ADO y empresas cordinadas, 2013</h4>
        </div>
    </div>
    <div data-role="page" id="pageDetails" data-title="Page Detalle" data-add-back-btn="true"
        data-back-btn-text="Regresar">
        <div data-role="header" data-theme="b">
            <h1>
                ADO</h1>
        </div>
        <div data-role="content" data-theme="c">
            <h2 class="alignCenter">
                Rendimiento de Combustible Autobuses</h2>
            <div id="errorPage">
            </div>
            <div id="panelContent">
                <div class="ui-grid-solo">
                    <div class="ui-block-a">
                        <div class="ui-bar ui-bar-c" id="metaMes">
                        </div>
                    </div>
                </div>
                <div class="ui-grid-b">
                    <div class="ui-block-a">
                        <div class="ui-bar ui-bar-c" id="metasVerde">
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div class="ui-bar ui-bar-c" id="metasAmarillo">
                        </div>
                    </div>
                    <div class="ui-block-c">
                        <div class="ui-bar ui-bar-c" id="metasRojo">
                        </div>
                    </div>
                    <div class="ui-block-a">
                        <div class="ui-bar ui-bar-c ui-bar-greenComponent" id="porcentajeVerde">
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div class="ui-bar ui-bar-c ui-bar-yellowComponent" id="porcentajeAmarillo">
                        </div>
                    </div>
                    <div class="ui-block-c">
                        <div class="ui-bar ui-bar-c ui-bar-redComponent" id="porcentajeRojo">
                        </div>
                    </div>
                </div>
                <p>
                </p>
                <div id="listaAutobuses" data-role="collapsible-set" data-theme="c" data-content-theme="d"
                    data-inset="false">
                </div>
            </div>
        </div>
        <div data-role="footer" data-theme="b" data-position="fixed">
            <h4>
                &copy;ADO y empresas cordinadas, 2013</h4>
        </div>
    </div>
</body>
</html>
